import React from 'react'
//1. 导入 hook. 用来获得 redux 中的状态值
import { useSelector } from 'react-redux'
import { useDispatch } from 'react-redux';
import { zanIncreAction, zanDecreAction } from '../../redux/reducers/zanReducer';

export default function ReduxCom() {
  //2. 调用 useSelector. 接收函数类型参数
  let {value} = useSelector(state => state.zan);//
  //调用 useDispatch 获得 dispatch 函数
  let dispatch = useDispatch();
  
  //声明函数
  const zanIncre = () => {
    //3. 更新状态
    dispatch(zanIncreAction(1));
  }

  const zanDecre = () => {
    dispatch(zanDecreAction(1));
  }

  return (
    <div className='container'>
      <h3>当前的点赞数: {value}</h3>
      <button className="btn btn-primary" onClick={zanIncre}>增加</button>&nbsp;
      <button className='btn btn-danger' onClick={zanDecre}>减少</button>
    </div>
  )
}
